<template>
   <el-dialog :title="dialogTitle" v-model="dialogVisible" @close="$refs['formRef'].resetFields()">
      <el-form :model="formData" ref="formRef" :rules="formRule" label-width="130px" label-suffix=":"
               :disabled="opMode=='detail'">
         <el-row>
            <el-col :span="12" style="padding-right: 40px;">
               <el-form-item label="图书编号" prop="bookCode">
                  <el-input v-model="formData.bookCode" clearable :disabled="opMode=='update'"/>
               </el-form-item>
            </el-col>
            <el-col :span="12" style="padding-right: 40px;">
               <el-form-item label="图书名称" prop="bookName">
                  <el-input v-model="formData.bookName" clearable/>
               </el-form-item>
            </el-col>
            <el-col :span="12" style="padding-right: 40px;">
               <el-form-item label="图书类型" prop="typeCode">
                  <el-select v-model="formData.typeCode" filterable clearable
                             placeholder="请选择图书类型" style="width: 100%">
                     <el-option v-for="item in ddl.typeCodeDdl" :key="item.typeCode" :label="item.typeName"
                                :value="item.typeCode">
                     </el-option>
                  </el-select>
               </el-form-item>
            </el-col>
            <el-col :span="12" style="padding-right: 40px;">
               <el-form-item label="销售价格" prop="sellPrice">
                  <el-input v-model="formData.sellPrice" type="number" clearable/>
               </el-form-item>
            </el-col>
            <el-col :span="12" style="padding-right: 40px;">
               <el-form-item label="作者" prop="author">
                  <el-input v-model="formData.author" clearable/>
               </el-form-item>
            </el-col>
            <el-col :span="12" style="padding-right: 40px; height: 62.8px; ">
               <el-form-item label="是否在售" prop="isSell">
                  <el-radio v-model="formData.isSell" label="是">是</el-radio>
                  <el-radio v-model="formData.isSell" label="否">否</el-radio>
               </el-form-item>
            </el-col>
            <el-col :span="12" style="padding-right: 40px;">
               <el-form-item label="封面图" prop="surfaceImg">
                  <img style="height: 90px;" :src="surfaceImg">
                  <el-upload ref="uploadFile" accept=".jpg,.jpeg,.png,.gif" v-show="opMode!='detail'"
                             :action="mUploadUrl()"
                             :show-file-list="true"
                             :auto-upload="false" :limit="1" :on-success="mUploadSuccess">
                     <template #trigger>
                        <el-button size="small" type="primary">选取上传文件</el-button>
                     </template>
                     <el-button style="margin-left: 10px;" size="small" type="success"
                                @click.stop="mUploadFile">上传到服务器
                     </el-button>
                  </el-upload>
               </el-form-item>
            </el-col>
            <el-col :span="12" style="padding-right: 40px;">
               <el-form-item label="出版时间" prop="publishDate">
                  <el-date-picker v-model="formData.publishDate" type="date" value-format="YYYY-MM-DD" clearable/>
               </el-form-item>
            </el-col>
            <el-col :span="24" style="padding-right: 40px;">
               <el-form-item label="图书介绍" prop="introduce">
                  <el-input v-model="formData.introduce" clearable/>
               </el-form-item>
            </el-col>
         </el-row>
      </el-form>
      <template #footer>
         <el-button @click="dialogClose">取 消</el-button>
         <el-button type="primary" @click="mSaveData" v-if="opMode == 'insert' || opMode== 'update'">确 定</el-button>
      </template>
   </el-dialog>
</template>
<script>
import axiosUtil from '@/utils/axiosUtil'

export default {
   data() {
      return {
         //控制对话框显示
         dialogVisible: false,
         //控制对话框标题
         dialogTitle: '图书详情',
         //对话框操作模式：详情，新增，修改，根据不同的模式，控制页面展示，也可以把详情，新增，修改分别创建成三个视图，每个视图的代码逻辑更加简单
         opMode: '',
         //表单数据
         formData: {
            id: '',
            bookCode: '',
            bookName: '',
            typeCode: '',
            sellPrice: '',
            author: '',
            publishDate: '',
            surfaceImg: '',
            introduce: '',
            isSell: '否'
         },
         //表单验证规则
         formRule: {
            bookCode: [{required: true, message: '必须录入', trigger: 'blur'}],
            bookName: [{required: true, message: '必须录入', trigger: 'blur'}],
            typeCode: [{required: true, message: '必须录入', trigger: 'blur'}],
            sellPrice: [{required: true, message: '必须录入', trigger: 'blur'}],
            author: [{required: true, message: '必须录入', trigger: 'blur'}],
            publishDate: [{required: true, message: '必须录入', trigger: 'blur'}],
         },
         ddl: {
            typeCodeDdl: [],
         }
      }
   },
   computed: {
      surfaceImg() {
         //返回图片访问路径
         return axiosUtil.baseUrl() + '/uploadDir/' + this.formData.surfaceImg;
      }
   },
   created() {
      //获取图书类型
      axiosUtil.get({
         url: '/admin/bookType/getTable',
         data: {
            pageIndex: 1,
            pageSize: 1000000,
         },
         success: res => {
            this.ddl.typeCodeDdl = res.data.table;
         }
      })
   },
   methods: {
      //显示对话框，给父组件调用的方法
      mShowDialog(type, row) {
         this.opMode = type;
         this.dialogVisible = true;
         if (type == 'insert') {
            this.dialogTitle = '图书新增'
            //将id置空，否则后台会识别成修改操作
            this.formData.id = '';
         }
         if (type == 'detail')
            this.dialogTitle = '图书详情';
         if (type == 'update')
            this.dialogTitle = '图书修改';

         //新增和修改的时候，获取要展示的数据
         if (type == 'detail' || type == 'update') {
            axiosUtil.get({
               url: '/admin/bookInfo/getDetail',
               data: {
                  id: row.id
               },
               success: res => {
                  Object.keys(this.formData).forEach((key) => {
                     this.formData[key] = res.data.entry[key];
                  })
               }
            })
         }
      },
      //关闭和重置对话框
      dialogClose() {
         console.info('对话框关闭')
         this.dialogVisible = false;
         this.$refs['formRef'].resetFields();

         //新增和修改关闭的时候，调用父组件的刷新方法
         if (this.opMode == 'insert' || this.opMode == 'update')
            this.$emit('refleshData')
      },
      //数据提交（由后台决定新增还是修改）
      mSaveData() {
         this.$refs['formRef'].validate(valid => {
            if (valid) {
               if (this.opMode == 'insert' || this.opMode == 'update') {
                  console.info('表单数据', this.form)
                  axiosUtil.postForm({
                     url: '/admin/bookInfo/saveData',
                     data: this.formData,
                     success: res => {
                        this.formData.id = res.data.id;
                        this.$message.info(res.data.msg);
                        this.dialogClose();
                     }
                  })
               }
            }
         })
      },
      //上传文件的路径
      mUploadUrl() {
         return axiosUtil.baseUrl() + '/admin/bookInfo/fileUpload';
      },
      //文件上传提交
      mUploadFile() {
         this.$refs['uploadFile'].submit();
      },
      //文件上传成功
      mUploadSuccess(res, file, fileList) {
         this.formData.surfaceImg = res.filePath;
         this.$message.info(res.msg);
         fileList.length = 0;
      },
   }
}
</script>
<style>
</style>